<!DOCTYPE html>
<html>

<head>
	<title>HTML Test File</title>
	<link rel="stylesheet" type="text/css" href="examples.css">
	<style>
		table,
		td {
			border: 1px solid silver;
			border-collapse: collapse
		}

		td {
			padding: .5em
		}

		#table-list-styles td {
			vertical-align: top;
		}

		.page-break {
			page-break-before: always;
		}
	</style>
</head>

<body>
	<div id="html" style='position: absolute; left: 0; top: 0; bottom: 0; overflow: auto; width: 400px'>
		<h1>HTML Test File</h1>
		This page showcases all HTML supported features.
		<hr>
		<h1>Headings</h1>
		<h1>Heading 1</h1>
		<h2>Heading 2</h2>
		<h3>Heading 3</h3>
		<h4>Heading 4</h4>
		<h5>Heading 5</h5>
		<h6>Heading 6</h6>
		<hr>
		<h1>
			<a id="colors" class="mce-item-anchor"></a>Colors
		</h1>
		<p>
			<span style="color: #ff0000; background-color: #00ff00;"
				data-mce-style="color: #ff0000; background-color: #00ff00;">Red Text With Green Background</span>
		</p>
		<hr>
		<h1 class='page-break'>
			<a id="font-sizes" class="mce-item-anchor"></a>Font Sizes
		</h1>
		<p>
			<span style="font-size: 12pt;" data-mce-style="font-size: 12pt;">12 Point</span>
		</p>
		<p>
			<span style="font-size: 24pt;" data-mce-style="font-size: 24pt;">24 Point</span>
		</p>
		<hr>
		<h1>
			<a id="fonts" class="mce-item-anchor"></a>Fonts
		</h1>
		<p>
			<span style="font-size: 24pt; font-family: arial, helvetica, sans-serif;"
				data-mce-style="font-size: 24pt; font-family: arial, helvetica, sans-serif;">Arial</span>
		</p>
		<p>
			<span style="font-size: 24pt; font-family: georgia, palatino;"
				data-mce-style="font-size: 24pt; font-family: georgia, palatino;">Georgia</span>
		</p>
		<p>
			<span style="font-size: 24pt; font-family: terminal, monaco;"
				data-mce-style="font-size: 24pt; font-family: terminal, monaco;">Terminal</span>
		</p>
		<p>
			<span style="font-size: 24pt; font-family: 'times new roman', times;"
				data-mce-style="font-size: 24pt; font-family: 'times new roman', times;">Times</span>
		</p>
		<hr>
		<h1 class='page-break'>
			<a id="tables" class="mce-item-anchor"></a>Tables
		</h1>
		<table class="mce-item-table">
			<tbody>
				<tr>
					<td>Number</td>
					<td>English</td>
					<td>Spanish</td>
				</tr>
				<tr>
					<td>1</td>
					<td>one</td>
					<td>uno</td>
				</tr>
				<tr>
					<td>2</td>
					<td>two</td>
					<td>dos</td>
				</tr>
				<tr>
					<td>3</td>
					<td>three</td>
					<td>tres</td>
				</tr>
			</tbody>
		</table>

		<h1>Images</h1>
		Images are subject to CORS restrictions an may only show up in a production environment.
		When testing, we start Chrome with the '--allow-file-access-from-files' flag...

		<img src="images/favicon.png" height="100" />

		<h1 class='page-break'>Lists</h1>
		<table id='table-list-styles'>
			<tr>
				<td>
					<p>Default</p>
					<ul>
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ul>
					<p>Circle</p>
					<ul style="list-style-type: circle;" data-mce-style="list-style-type: circle;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ul>
					<p>Disk</p>
					<ul style="list-style-type: disc;" data-mce-style="list-style-type: disc;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ul>
					<p>Square</p>
					<ul style="list-style-type: square;" data-mce-style="list-style-type: square;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ul>
				</td>
				<td>
					<p>Default</p>
					<ol>
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Lower Alpha</p>
					<ol style="list-style-type: lower-alpha;" data-mce-style="list-style-type: lower-alpha;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Upper Alpha</p>
					<ol style="list-style-type: upper-alpha;" data-mce-style="list-style-type: upper-alpha;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
				</td>
				<td>
					<p>Lower&nbsp;Roman</p>
					<ol style="list-style-type: lower-roman;" data-mce-style="list-style-type: lower-roman;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Upper&nbsp;Roman</p>
					<ol style="list-style-type: upper-roman;" data-mce-style="list-style-type: upper-roman;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Lower&nbsp;Greek</p>
					<ol style="list-style-type: lower-greek;" data-mce-style="list-style-type: lower-greek;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
					<p>Upper&nbsp;Greek</p>
					<ol style="list-style-type: upper-greek;" data-mce-style="list-style-type: upper-greek;">
						<li>Milk</li>
						<li>Eggs</li>
						<li>Cheese</li>
					</ol>
				</td>
			</tr>
		</table>

		<h1 class='page-break'>Hyperlinks</h1>
		<h2>Internal</h2>
		<p>
			<a href="#colors" data-mce-href="#colors">Colors</a>
		</p>
		<p>
			<a href="#font-sizes" data-mce-href="#font-sizes">Font Sizes</a>
		</p>
		<p>
			<a href="#fonts" data-mce-href="#fonts">Fonts</a>
		</p>
		<p>
			<a href="#tables" data-mce-href="#tables">Tables</a>
		</p>
		<h2>External</h2>
		<p>
			<a href="http://www.twelvetone.tv" data-mce-href="http://www.twelvetone.tv">www.twelvetone.tv</a>
		</p>
	</div>

	<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
	<script src='../../dist/jspdf.debug.js'></script>

	<script>
		var pdf = new jsPDF('p', 'pt', 'letter');
		pdf.html(document.getElementById('html'), {
			callback: function (pdf) {
				var iframe = document.createElement('iframe');
				iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
				document.body.appendChild(iframe);
				iframe.src = pdf.output('datauristring');
			}
		});
	</script>
</body>

</html>